<template>
  <el-dialog
    class="dialogBox"
    @close="close"
    :visible="isShowRegister"
    width="500px"
  >
    <img class="registerImg" src="../../../assets/img/registered.png" alt="" />
    <el-form v-if="registerType === 0" class="form1" :model="userInfo">
      <el-form-item>
        <el-input
          v-model="userInfo.mobile"
          prefix-icon="el-icon-mobile-phone"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="userInfo.password"
          prefix-icon="el-icon-lock"
          placeholder="设置登录密码"
          type="password"
        ></el-input>
        <p class="tips">密码8-20位，至少包含字母/数字/字符2种组合</p>
      </el-form-item>
      <el-form-item class="btn1">
        <el-button @click="register" type="primary" :loading="isRegisterType"
          >注 册</el-button
        >
      </el-form-item>
    </el-form>
    <el-form v-else-if="registerType === 1" class="form2">
      <el-form-item class="codeAndBtn">
        <el-input
          prefix-icon="el-icon-key"
          placeholder="请填写验证码"
          v-model="code"
        ></el-input>
        <el-button class="getCode" v-if="isSendCode" @click="getCode"
          >获取验证码</el-button
        >
        <span class="sendTime" v-else>{{ sendTime }}s</span>
      </el-form-item>
      <el-form-item class="btn2">
        <el-button @click="submitCode">下一步</el-button>
      </el-form-item>
    </el-form>
    <el-form v-else-if="registerType === 2" class="form2" :model="userInfo">
      <el-form-item class="codeAndBtn">
        <el-input
          prefix-icon="el-icon-user"
          placeholder="请填写昵称"
          v-model="userInfo.nickname"
        ></el-input>
      </el-form-item>
      <el-form-item class="btn2">
        <el-button @click="registerOverBtn">完成注册</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import {
  testMobileIsRegister,
  registerGetCode,
  submitRegisterCode,
  registerOver
} from '@/api/login/login'
export default {
  data() {
    return {
      userInfo: {
        mobile: '',
        password: '',
        nickname: ''
      },
      registerType: 0, // 第几步
      code: '', //验证码
      isRegisterType: false, // 注册按钮是否呈现加载状态
      sendTime: 60, // 发送短信倒计时
      isSendCode: true // 是否显示倒计时
    }
  },
  props: {
    isShowRegister: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 发送验证码
    async getCode() {
      const res = await registerGetCode({ phone: this.userInfo.mobile })
      if (res.data.code === 200) {
        //获取成功
        this.isSendCode = false //开启倒计时
        this.sendTime = 60 //重新赋值60秒
        let timer = setInterval(() => {
          this.sendTime--
          if (this.sendTime === 0) {
            clearInterval(timer)
            this.isSendCode = false //关闭倒计时显示按钮
            return
          }
        }, 1000)
        return true // 获取成功
      } else {
        this.$message.error(res.data.message)
        return false //获取失败
      }
    },
    // 注册手机号
    async register() {
      // console.log('注册')
      this.isRegisterType = true
      if (
        this.userInfo.password.length < 8 ||
        this.userInfo.mobile.length !== 11
      ) {
        // 如果密码小于8位数，或者手机号不等于11位，格式错误
        this.$message.warning('手机号码或者密码格式错误!')
        this.isRegisterType = false
        return
      }
      //检测手机号是否注册过
      const res = await testMobileIsRegister({ phone: this.userInfo.mobile })
      // console.log(res)
      if (res.data.exist !== 1) {
        this.isRegisterType = false // 关闭加载
        if (await this.getCode())
          // 发送验证码
          this.registerType = 1 // 进入第二步
      } else {
        this.isRegisterType = false
        this.$message.warning('手机号已被注册过，请直接登录!')
        this.close() // 关闭注册框
      }
    },
    // 提交注册验证码
    async submitCode() {
      this.isRegisterType = false // 开启加载状态
      if (this.code.length !== 4) {
        this.$message.warning('请输入四位的验证码!')
        this.isRegisterType = true
        return
      }
      const res = await submitRegisterCode({
        phone: this.userInfo.mobile,
        captcha: this.code
      }).catch((err) => {
        this.$message.error(err.response.data.message)
        this.isRegisterType = false
      })
      if (!res) {
        return
      }
      // console.log(res)
      this.isRegisterType = false
      if (res.data.data) {
        this.registerType = 2 //进入第三步
      }
    },
    // 完成注册，设置用户昵称
    async registerOverBtn() {
      this.isRegisterType = true
      const res = await registerOver({
        captcha: this.code,
        phone: this.userInfo.mobile,
        password: this.userInfo.password,
        nickname: this.userInfo.nickname
      }).catch((err) => {
        this.$message.error(err.response.data.message)
        this.isRegisterType = false
      })
      if (!res) {
        return
      }

      // 请求结束后按钮设为正常状态
      this.isRegisterType = false
      // console.log(res);
      if (res.data.code == 200) {
        this.$message.success('注册成功!')
        this.close
      } else {
        this.$message.error('注册失败!')
      }
    },
    close() {
      // 重置
      this.userInfo = {
        mobile: '',
        password: '',
        nickname: ''
      }
      this.registerType = 0
      this.code = ''
      this.isRegisterType = false
      this.sendTime = 60
      this.isSendCode = true
      this.$emit('closeRegister')
    }
  }
}
</script>
<style lang="scss" scoped>
.dialogBox {
  text-align: center;
}
:deep(.el-dialog) {
  border-radius: 15px;
}
// 右上角×
:deep(.el-dialog__close) {
  font-size: 20px;
  &:hover {
    color: #ea4848;
  }
}
.registerImg {
  width: 220px;
  margin-bottom: 10px;
}
.tips {
  color: #999;
}
.form1,
.form2 {
  :deep(.el-input__inner) {
    width: 85%;
    border-radius: 20px;
    text-indent: 0.5em;
    &:focus {
      border-color: #999;
    }
  }
  .codeAndBtn {
    position: relative;
    .getCode {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 5px;
      right: 50px;
      height: 30px;
      width: 90px;
      background-color: #ea4848;
      color: #fff;
      &:hover {
        background-color: #f02e2e;
        border-color: none;
      }
    }
  }
}
.btn1,
.btn2 {
  display: flex;
  justify-content: center;
  margin-top: -10px;
  margin-bottom: 20px;
  :deep(.el-button) {
    width: 360px;
    height: 45px;
    background-color: #ea4848;
    border: none;
    color: #fff;
    &:hover {
      background-color: #f02e2e;
    }
  }
}
//获取验证码的btn
.btn2 {
  :deep(.el-button) {
    margin-top: 20px;
    height: 40px;
  }
}
:deep(.el-input__icon) {
  font-size: 16px;
  margin-left: 38px;
}
// 发送短信倒计时
.sendTime {
  position: absolute;
  top: 0;
  right: 80px;
}
</style>
